<template>
  <el-row>
    <!-- 个人信息输入区域 -->
    <div>
      <el-input
          v-model="input2"
          class="UID"
          placeholder="Please input"
          disabled
      >
        <template #prepend>UID</template>
      </el-input>
    </div>

    <div>
      <el-input
          v-model="input1"

          class="username"
          placeholder="Please input"
      >
        <template #prepend>用户名</template>
      </el-input>
    </div>

    <div>
      <el-input
          v-model="input3"
          disabled
          class="addtime"
          placeholder="Please input"
      >
        <template #prepend>创建时间</template>
      </el-input>
    </div>

    <div>
      <el-input
          v-model="input4"
          class="realname"
          placeholder="Please input"
      >
        <template #prepend>真实姓名</template>
      </el-input>
    </div>

    <div>
      <el-input
          v-model="input5"
          class="address"
          placeholder="Please input"
      >
        <template #prepend>住址</template>
      </el-input>
    </div>
    <div>
      <el-input
          v-model="input6"
          class="phone"
          placeholder="Please input"
      >
        <template #prepend>电话</template>
      </el-input>
    </div>
    <div>
      <el-input
          v-model="input7"
          class="birth"
          placeholder="Please input"
      >
        <template #prepend>出生日期</template>
      </el-input>
    </div>
    <div>
      <el-input
          v-model="input8"
          class="password"
          placeholder="Please input"
          disabled
      >
        <template #prepend>密码</template>
      </el-input>
    </div>

    <el-button plain @click="dialogFormVisible = true" class="button">
    修改
    </el-button>

    <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
      <el-form :model="form">
        <el-form-item label="修改后的密码" :label-width="formLabelWidth" >
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" >
          <el-input v-model="again.name" autocomplete="off" placeholder="请再次输入密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <h1 class="sub-title">个人信息</h1>

    <div class="demo-basic--circle">
      <div class="block">
        <el-upload
            v-model:file-list="fileList"
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :show-file-list="false"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            class="upload-demo"
            multiple
            @change="handleFileChange"
        >
          <el-avatar :size="150" :src="circleUrl" class="avatar-circle"/>
        </el-upload>
      </div>
    </div>
  </el-row>


</template>

<script setup>


import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
const input5 = ref('')
const input6 = ref('')
const input7 = ref('')
const input8 = ref('')

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const again = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const fileList = ref([]);
const circleUrl = ref('');

const handlePreview = (file) => {
  console.log('Preview file: ', file);
};

const handleRemove = (file, fileList) => {
  console.log('Remove file: ', file);
};

const beforeRemove = (file, fileList) => {
  return window.confirm(`确定移除 ${file.name}？`);
};

const handleExceed = (files, fileList) => {
  this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件`);
};

// 添加此方法来处理文件上传后更新circleUrl
const handleFileChange = (rawFile) => {
  if (rawFile && rawFile.raw) {
    const reader = new FileReader();
    reader.onload = (e) => {
      circleUrl.value = e.target.result;
    };
    reader.readAsDataURL(rawFile.raw);
  }
};

// 更新el-upload的@change事件处理器

</script>

<style scoped>
.sub-title {
  margin-top: 60px;
  margin-left: 340px;
}

.block {
  position: absolute;
  margin-top: 40px;
  margin-left: 300px;
}

.avatar-circle {
  border-radius: 50%;
}
.username{
  position: absolute;
  width: 300px;
  height: 40px;
  margin-top: 260px;
  margin-left: 40px;
}
.UID{
  position: absolute;
  width: 300px;
  height: 40px;
  margin-top: 160px;
  margin-left: 40px;

}
.addtime{
  position: absolute;
  width: 300px;
  height: 40px;
  margin-top: 360px;
  margin-left: 40px;
}
.realname{
  position: absolute;
  width: 300px;
  height: 40px;
  margin-top: 160px;
  margin-left: 400px;
}
.address{
  position: absolute;
  width: 300px;
  height: 40px;
  margin-top: 260px;
  margin-left: 400px;
}
.phone{
  position: absolute;
  width: 300px;
  height: 40px;
  margin-top: 360px;
  margin-left: 400px;
}
.birth{
  position: absolute;
  width: 300px;
  height: 40px;
  margin-top: 460px;
  margin-left: 40px;
}
.password{
  position: absolute;
  width: 300px;
  height: 40px;
  margin-top: 460px;
  margin-left: 400px;
}
.button{
  width:70px;
  height: 40px;
  position: absolute;
  margin-top: 460px;
  margin-left: 700px;
}
</style>